<template>
  <div class="user-list">
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item label="违规描述">
          <el-input v-model="filterForm.description" placeholder="请输入违规描述"></el-input>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="filterForm.status" placeholder="请选择状态">
            <el-option label="待处理" value="1"></el-option>
            <el-option label="已处理" value="2"></el-option>
            <el-option label="待申述" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUsers">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>

    <!--    违规信息列表-->
    <el-card>
      <div slot="header" class="clearfix">
        <span>违规信息列表</span>
      </div>

      <el-table :data="ViolationList" stripe border fit highlight-current-row>
        <el-table-column prop="violationId" label="编号" ></el-table-column>
        <el-table-column prop="contentId" label="内容id"></el-table-column>
        <el-table-column prop="userId" label="用户id"></el-table-column>
        <el-table-column prop="violationType" label="违规类型"></el-table-column>
        <el-table-column prop="description" label="违规描述"></el-table-column>
        <el-table-column prop="evidence" label="违规证据"></el-table-column>

        <el-table-column prop="createTime" label="创建时间" >
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="processTime" label="处理时间" >
          <template #default="{ row }">
            {{ formatDate(row.processTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'danger' : row.status === 2 ?'success' : 'warning' ">
              {{ row.status === 1 ? '待处理' : row.status === 2 ? '已处理' : '已申诉' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-link type="primary" @click="handleView(row)">查看</el-link>
            <el-divider direction="vertical" />
            <el-link type="danger" @click="handleDelete(row)">删除</el-link>
            <el-divider direction="vertical" />
            <el-link type="success" @click="handleEdit(row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>


  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'UserList',
  data() {
    return {
      filterForm: {
        description: '',
        status: ''
      },
      ViolationList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
    }
  },
  mounted() {
    this.getVioList();
  },
  methods: {
    // 获取违规列表
    getVioList() {
      return new Promise(resolve => {
        this.ViolationList = [
          // 用户数据...
          {
            violationId:1,
            contentId:1,
            userId: 1,
            violationType: 'xxxxx',
            description: 'rrrrrrr',
            evidence: 'https://picsum',
            createTime: '2023-01-01 10:00:00',
            processTime: '2023-06-10 14:30:00',
            status: 1
          },
          {
            violationId:1,
            contentId:1,
            userId: 1,
            violationType: 'xxxxx',
            description: 'fffffff',
            evidence: '/200/200?random=1',
            createTime: '2023-01-01 10:00:00',
            processTime: '2023-06-10 14:30:00',
            status: 2
          },
          {
            violationId:1,
            contentId:1,
            userId: 1,
            violationType: 'xxxxx',
            description: 'rrr',
            evidence: 'httprr',
            createTime: '2023-01-01 10:00:00',
            processTime: '2023-06-10 14:30:00',
            status: 3
          }
        ]
        this.currentPage=1
        this.pageSize=10
        this.total=5
        resolve();
        console.log(this.ViolationList)
      });

      // axios.get('/api/users/list', {
      //   params: {
      //     username: this.filterForm.username,
      //     status: this.filterForm.status,
      //     roleCode: this.filterForm.roleCode,
      //     page: this.currentPage,
      //     pageSize: this.pageSize
      //   }
      // }).then(response => {
      //   const data = response.data;
      //   if (data.success) {
      //     this.userList = data.list;
      //     this.total = data.total;
      //   } else {
      //     this.$message.error(data.message);
      //   }
      // }).catch(error => {
      //   console.error('获取用户列表失败:', error);
      //   this.$message.error('获取用户列表失败，请检查网络连接');
      // });
    },

    // 搜索用户
    searchUsers() {
      this.currentPage = 1;
      this.getVioList();
    },

    // 重置过滤条件
    resetFilter() {
      this.filterForm = {
        description: '',
        status: ''
      };
      this.currentPage = 1;
      this.getVioList();
    },

    // 处理分页大小变化
    handleSizeChange(size) {
      this.pageSize = size;
      this.getVioList();
    },

    // 处理当前页变化
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getVioList();
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return date.toLocaleString();
    },


    // 查看用户
    handleView(row){
      console.log(row)
    },
    // 处理编辑用户
    handleEdit(row) {
      console.log("edit")
    },

    // 处理删除用户
    handleDelete(row) {
     console.log("del")
    },

    // 保存用户
    saveUser() {
      console.log("save")
    }
  }
}
</script>

<style scoped>
.user-list {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

</style>
